import React, { useRef, useState } from 'react';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { PageContainer, ProTable, FooterToolbar } from '@ant-design/pro-components';
import { Button, message } from 'antd';
import { deletePackage, fetchPackageList } from '@/services/ant-design-pro/package';
import type { Package } from '@/types/package';
import CreateOrUpdateForm from './components/CreateForm';

const PackageList: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [selectedRows, setSelectedRows] = useState<Package[]>([]);
  const [showModal, setShowModal] = useState(false);
  const [currentRow, setCurrentRow] = useState<Package | undefined>();
  const [messageApi, contextHolder] = message.useMessage();

  const columns: ProColumns<Package>[] = [
    {
      title: '套餐名称',
      dataIndex: 'title',
      render: (text, record) => (
        <a
          onClick={() => {
            setCurrentRow(record);
            setShowModal(true);
          }}
        >
          {text}
        </a>
      ),
    },
    {
      title: '副标题',
      dataIndex: 'subTitle',
    },
    {
      title: '组织名称',
      dataIndex: 'orgName',
    },
    {
      title: '部门名称',
      dataIndex: 'deptName',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      valueType: 'dateTime',
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      valueType: 'dateTime',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a
          key="edit"
          onClick={() => {
            setCurrentRow(record);
            setShowModal(true);
          }}
        >
          编辑
        </a>,
        <a
          key="delete"
          onClick={async () => {
            await deletePackage({ id: record.id });
            actionRef.current?.reloadAndRest?.();
            messageApi.success('删除成功');
          }}
        >
          删除
        </a>,
      ],
    },
  ];

  return (
    <PageContainer header={{title:''}}>
      {contextHolder}
      <ProTable<Package>
        headerTitle={intl.formatMessage({
          id: 'pages.packageList.title',
          defaultMessage: '套餐列表',
        })}
        actionRef={actionRef}
        rowKey="id"
        request={async (params, sort, filter) => {
          const data = await fetchPackageList(params);
          return { data: data.data, success: true };
        }}
        columns={columns}
        rowSelection={{
          onChange: (_, selectedRows) => setSelectedRows(selectedRows),
        }}
        toolBarRender={() => [
          <Button
            type="primary"
            key="create"
            onClick={() => {
              setCurrentRow(undefined);
              setShowModal(true);
            }}
          >
            新建
          </Button>,
        ]}
      />

      {selectedRows?.length > 0 && (
        <FooterToolbar>
          <Button
            onClick={async () => {
              await deletePackage({ id: selectedRows.map(row => row.id) });
              setSelectedRows([]);
              actionRef.current?.reloadAndRest?.();
              messageApi.success('批量删除成功');
            }}
          >
            批量删除
          </Button>
        </FooterToolbar>
      )}

      <CreateOrUpdateForm
        visible={showModal}
        onClose={() => setShowModal(false)}
        onOk={() => {
          actionRef.current?.reloadAndRest?.();
          setShowModal(false);
        }}
        currentData={currentRow}
      />
    </PageContainer>
  );
};

export default PackageList;
